<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>量化因子挖掘</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        .form-group {
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        .form-label {
            min-width: 100px;
            margin-bottom: 0;
            font-weight: 500;
        }
        select, input[type="number"] {
            flex: 1;
            padding: 0.375rem 0.75rem;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>量化因子挖掘</h2>
        <div class="params-form card card-body mb-4">
            <h4>参数设置</h4>
            <div class="form-group">
                <label class="form-label">资产类别:</label>
                <select id="asset_class" class="form-select" onchange="toggleAssetParams()">
                    <option value="国债">国债</option>
                    <option value="外汇">外汇</option>
                    <option value="贵金属">贵金属</option>
                </select>
            </div>

            <div id="bond_params">
                <div class="form-group">
                    <label class="form-label">债券期限:</label>
                    <select id="bond_duration" class="form-select">
                        <option value="中端(3-7Y)">中端(3-7Y)</option>
                        <option value="短期(0-3Y)">短期(0-3Y)</option>
                        <option value="长期(7Y+)">长期(7Y+)</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">信用评级:</label>
                    <select id="credit_rating" class="form-select">
                        <option value="AAA">AAA</option>
                        <option value="AA">AA</option>
                        <option value="A">A</option>
                    </select>
                </div>
            </div>

            <div id="fx_params" style="display:none">
                <div class="form-group">
                    <label class="form-label">货币对:</label>
                    <select id="currency_pair" class="form-select">
                        <option value="EUR/USD">EUR/USD</option>
                        <option value="USD/JPY">USD/JPY</option>
                        <option value="GBP/USD">GBP/USD</option>
                        <option value="USD/CNH">USD/CNH</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">杠杆率:</label>
                    <input type="number" id="leverage_ratio" class="form-control" min="1" max="100" value="50">
                </div>
            </div>

            <div id="metal_params" style="display:none">
                <div class="form-group">
                    <label class="form-label">金属类型:</label>
                    <select id="metal_type" class="form-select">
                        <option value="黄金">黄金</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">市场:</label>
                    <select id="market" class="form-select">
                        <option value="期货主力合约">期货主力合约</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">波动率:</label>
                    <select id="volatility_profile" class="form-select">
                        <option value="常态波动">常态波动</option>
                        <option value="高波动">高波动</option>
                        <option value="低波动">低波动</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">持仓成本:</label>
                    <input type="number" id="carry_cost" class="form-control" step="0.0001" min="0" max="0.01" value="0.0002">
                </div>
                <div class="form-group">
                    <label class="form-label">最大杠杆:</label>
                    <input type="number" id="max_leverage" class="form-control" step="0.1" min="1" max="10" value="5.0">
                </div>
                <div class="form-group">
                    <label class="form-label">数据源:</label>
                    <div style="display: flex; flex-direction: column; gap: 0.5rem;">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="price_data" checked>
                            <label class="form-check-label" for="price_data">价格</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="position_data" checked>
                            <label class="form-check-label" for="position_data">持仓量</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="dollar_index" checked>
                            <label class="form-check-label" for="dollar_index">美元指数</label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">时间框架:</label>
                <select id="time_frame" class="form-select">
                    <option value="日线">日线</option>
                    <option value="1小时">1小时</option>
                    <option value="15分钟">15分钟</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">最大回撤:</label>
                <input type="number" id="max_drawdown" class="form-control" step="0.01" min="0" max="1" value="0.1">
            </div>
            <div class="form-group">
                <label class="form-label">数据源:</label>
                <div style="display: flex; flex-direction: column; gap: 0.5rem;">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="macro" checked>
                        <label class="form-check-label" for="macro">宏观经济指标</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="policy" checked>
                        <label class="form-check-label" for="policy">央行政策文本</label>
                    </div>
                    <div id="fx_data_source" style="display:none" class="form-check">
                        <input class="form-check-input" type="checkbox" id="orderbook">
                        <label class="form-check-label" for="orderbook">L2订单簿</label>
                    </div>
                </div>
            </div>
        </div>

        <button class="btn btn-primary mb-3" onclick="executeWorkflow()">执行完整工作流</button>

        <div class="alert alert-info mb-3" id="status">准备就绪</div>
        
        <h4>执行结果:</h4>
        <pre id="workflow_result" class="bg-light p-3 rounded border"></pre>
    </div>

    <script>
        function toggleAssetParams() {
            const assetClass = document.getElementById('asset_class').value;
            document.getElementById('bond_params').style.display = 
                assetClass === '国债' ? 'block' : 'none';
            document.getElementById('fx_params').style.display = 
                assetClass === '外汇' ? 'block' : 'none';
            document.getElementById('metal_params').style.display = 
                assetClass === '贵金属' ? 'block' : 'none';
            document.getElementById('fx_data_source').style.display = 
                assetClass === '外汇' ? 'block' : 'none';
        }

        async function executeWorkflow() {
            const statusElement = document.getElementById('status');
            const resultElement = document.getElementById('workflow_result');
            
            try {
                statusElement.textContent = "正在执行工作流...";
                resultElement.textContent = "";
                
                // 执行完整工作流
                // 收集参数
                const dataSources = [];
                if (document.getElementById('macro').checked) dataSources.push("宏观经济指标");
                if (document.getElementById('policy').checked) dataSources.push("央行政策文本");
                
                const assetClass = document.getElementById('asset_class').value;
                const params = {
                    asset_class: assetClass,
                    time_frame: document.getElementById('time_frame').value,
                    max_drawdown: parseFloat(document.getElementById('max_drawdown').value),
                    data_sources: JSON.stringify(dataSources)  // 序列化为JSON字符串
                };

                if (assetClass === '国债') {
                    params.bond_duration = document.getElementById('bond_duration').value;
                    params.credit_rating = document.getElementById('credit_rating').value;
                } else if (assetClass === '外汇') {
                    params.currency_pair = document.getElementById('currency_pair').value;
                    params.leverage_ratio = parseInt(document.getElementById('leverage_ratio').value);
                    if (document.getElementById('orderbook').checked) {
                        dataSources.push("L2订单簿");
                    }
                } else if (assetClass === '贵金属') {
                    params.metal_type = document.getElementById('metal_type').value;
                    params.market = document.getElementById('market').value;
                    params.volatility_profile = document.getElementById('volatility_profile').value;
                    params.carry_cost = parseFloat(document.getElementById('carry_cost').value);
                    params.max_leverage = parseFloat(document.getElementById('max_leverage').value);
                    
                    const metalDataSources = [];
                    if (document.getElementById('price_data').checked) metalDataSources.push("价格");
                    if (document.getElementById('position_data').checked) metalDataSources.push("持仓量");
                    if (document.getElementById('dollar_index').checked) metalDataSources.push("美元指数");
                    params.metal_data_sources = JSON.stringify(metalDataSources);
                }
                
                const response = await axios.post('/agent/execute_workflow', params);
                
                statusElement.textContent = "工作流执行完成!";
                // 格式化JSON输出
                try {
                    const jsonData = typeof response.data === 'string' ? 
                        JSON.parse(response.data) : response.data;
                    resultElement.textContent = JSON.stringify(jsonData, null, 2);
                } catch (e) {
                    resultElement.textContent = response.data;
                }
                
            } catch (error) {
                statusElement.textContent = "工作流执行失败";
                resultElement.textContent = `错误: ${error.message}\n${error.response?.data || ''}`;
                console.error('工作流执行失败:', error);
            }
        }
    </script>
</body>
</html>
